<template>
    <div>
        <van-nav-bar
            title="用户注册"
            left-text='返回'
            left-arrow
            @click-left="goBack"
        />
        <div class="register-panel">
            <van-field
                v-model="username"
                label='用户名'
                icon='clear'
                placeholder="请输入用户名"
                required
                @click-icon="userName=''"
                :error-message="usernameErroMsg"
            />
            
            <van-field
                v-model="password"
                type='password'
                label='密码'
                required
                :error-message="passwordErroMsg"
            />

            <div class="register-button">
                <van-button type="primary" size="large" @click="registerAction()" :loading="openLoading"> 马上注册 </van-button>
            </div>
        </div>
        
    </div>
</template>

<script>
    import axios from 'axios'
    import url from '@/serverApi.config.js'
    import { Toast  } from 'vant'
    export default {
       name:'Register',
       data () {
           return {
             username:'',
             password:'',
             openLoading:false, //是否开启注册用户的loading状态
             usernameErroMsg:'', /**当用户名出线错误时提示 */
             passwordErroMsg:'', /**当密码出线错误时提示 */
          }
       },
       methods:{
           goBack () {
               this.$router.go(-1)
           },
           registerAction(){
            //    if(this.checkForm()){
            //        axiosRegisterUser();
            //    }else{
            //    }
                this.checkForm() && this.axiosRegisterUser()

           },
           axiosRegisterUser(){
               this.openLoading = true;
               axios({
                   url:url.registerUser,
                   method:'post',
                   data:{
                        userName:this.username,
                        password:this.password
                   },
               })
               .then(response => {
                    if( response.data.code == 200 ){
                        Toast.success(response.data.message)
                        this.$router.push('/')
                    }else {
                        // console.log(response.data.message)
                        this.openLoading = false
                        Toast.fail('注册失败')
                    }

               })
               .catch( (res) => {
                   console.log(res)
                   Toast.fail('注册失败')
                   this.openLoading = false

               }) 
           },
           /** 表单验证 */
           checkForm(){
               let isOK =true
               if(this.username.length < 5 ){
                   this.usernameErroMsg='用户名不能少于6位'
                   isOK = false
               }else {
                   this.usernameErroMsg=''
               }
               if(this.password.length < 5 ){
                   this.passwordErroMsg='密码不能少于6位'
                   isOK = false
               }else {
                   this.passwordErroMsg=''
               }
               return isOK
           }
       },
    }
</script>

<style scoped>
    .register-panel{
        width: 96%;
        border-radius: 5px;
        margin: 20px auto;
        padding-bottom: 80px;
    }
    .register-button {
        padding-top: 10px;
    }

</style>